<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听器</title>
    <script src="/javascripts/vue@3.0.11.js" ></script>
</head>
<body>

    <div id="first">
        千米: <input type="text" v-model="kilometers">
        米: <input type="text" v-model="meters">
    </div>

    <hr>

    <div id="second">
        千米: <input type="text" v-model="kilometers">
        米: <input type="text" v-model="meters">
    </div>

    <script>
        const app1 = Vue.createApp( {
            data(){
                return {
                    kilometers: '',
                    meters: ''
                }
            },
            watch: {
                kilometers(value){
                    this.meters = value * 1000 ;
                },
                meters(value){
                    this.kilometers = value / 1000 ;
                }
            }
        } );
        const vm1 = app1.mount( '#first' );

        const app2 = Vue.createApp( {
            data(){
                return {
                    kilometers: '',
                    meters: ''
                }
            },
            created(){
                this.$watch( 'kilometers' , (value,old)=>{
                    this.meters = value * 1000;
                });

                this.$watch( 'meters' , (value,old)=>{
                    this.kilometers = value / 1000 ;
                });
            }
        } );
        const vm2 = app2.mount( '#second' );

    </script>

</body>
</html>